@extends('base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" >
                <ul class="layui-tab-title">
                    <li class="layui-this">客户信息</li>
                    <li>跟进记录</li>
                    <li>报价记录</li>
                    <li>合同记录</li>
                    <li>订单记录</li>
                    <li>款项记录</li>
                    <li>通话记录</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <div class="layui-card">
                                    <div class="layui-card-header"><b>基础信息</b></div>
                                    <div class="layui-card-body">
                                        <table class="layui-table" lay-skin="nob">
                                            <tbody>
                                            <tr>
                                                <td width="80" align="right">联系人：</td>
                                                <td>{{$model->contact_name}}</td>
                                                <td width="80" align="right">跟进时间：</td>
                                                <td>{{$model->follow_time}}</td>
                                            </tr>
                                            <tr>
                                                <td width="80" align="right">联系电话：</td>
                                                <td>{{$model->contact_phone_encode}}</td>
                                                <td width="80" align="right">跟进人：</td>
                                                <td>{{$model->follow_user_nickname}}</td>
                                            </tr>
                                            <tr>
                                                <td width="80" align="right">客户名称：</td>
                                                <td>{{$model->name}}</td>
                                                <td width="80" align="right">节点进度：</td>
                                                <td>{{$model->node_name}}</td>
                                            </tr>
                                            <tr>
                                                <td width="80" align="right">分类：</td>
                                                <td>{{$model->type_name}}</td>
                                                <td width="80" align="right">来源：</td>
                                                <td>{{$model->source_name}}</td>
                                            </tr>
                                            <tr>
                                                <td width="80" align="right">分配人：</td>
                                                <td>{{$model->assignment_user_nickname}}</td>
                                                <td width="80" align="right">分配时间：</td>
                                                <td>{{$model->assignment_time}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs5">
                                <div class="layui-card">
                                    <div class="layui-card-header"><b>扩展信息</b></div>
                                    <div class="layui-card-body">
                                        <table class="layui-table" lay-skin="nob">
                                            <tbody>
                                            @foreach($model->fields as $d)
                                                <tr>
                                                    <td width="80" align="right">{{$d->field_label}}：</td>
                                                    <td>
                                                        @switch($d->field_type)
                                                            @case('select')
                                                            @if($d->field_option&&strpos($d->field_option,"\n"))
                                                                @foreach(explode("\n",$d->field_option) as $v)
                                                                    @php
                                                                        $key = \Illuminate\Support\Str::before($v,':');
                                                                        $val = \Illuminate\Support\Str::after($v,':');
                                                                    @endphp
                                                                    @if($key==$d->pivot->data)
                                                                        {{$val}}
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                            @break
                                                            @case('radio')
                                                            @if($d->field_option&&strpos($d->field_option,"\n"))
                                                                @foreach(explode("\n",$d->field_option) as $v)
                                                                    @php
                                                                        $key = \Illuminate\Support\Str::before($v,':');
                                                                        $val = \Illuminate\Support\Str::after($v,':');
                                                                    @endphp
                                                                    @if($key==$d->pivot->data)
                                                                        {{$val}}
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                            @break
                                                            @case('checkbox')
                                                            @if($d->field_option&&strpos($d->field_option,"\n"))
                                                                @foreach(explode("\n",$d->field_option) as $v)
                                                                    @php
                                                                        $key = \Illuminate\Support\Str::before($v,':');
                                                                        $val = \Illuminate\Support\Str::after($v,':');
                                                                        $fieldValue = [];
                                                                        if ($d->pivot->data){
                                                                            $fieldValue = explode(",",$d->pivot->data);
                                                                        }
                                                                    @endphp
                                                                    @if(in_array($key,$fieldValue) || $key==$d->pivot->data )
                                                                        {{$val}}&nbsp;&nbsp;
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                            @break
                                                            @case('image')
                                                            @if($d->pivot->data)
                                                                <a href="{{$d->pivot->data}}" target="_blank"><img src="{{$d->pivot->data}}" alt="" width="80" height="40"></a>
                                                            @endif
                                                            @break
                                                            @case('images')
                                                            @if($d->pivot->data)
                                                                @foreach(explode(",",$d->pivot->data) as $v)
                                                                    <a href="{{$v}}" target="_blank"><img src="{{$v}}" alt="" width="80" height="40"></a>
                                                                @endforeach
                                                            @endif
                                                            @break
                                                            @default
                                                            {{$d->pivot->data}}
                                                            @break
                                                        @endswitch
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <ul class="layui-timeline" id="remark_list_box"></ul>
                    </div>
                    <div class="layui-tab-item">
                        <table id="dataTable" lay-filter="dataTable"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="dataTableContract" lay-filter="dataTableContract"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="dataTableOrder" lay-filter="dataTableOrder"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="dataTableFinance" lay-filter="dataTableFinance"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="dataTableCdr" lay-filter="dataTableCdr"></table>
                    </div>
                </div>
            </div>


        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['layer','table','form','element','flow','laydate'],function () {
            var $ = layui.jquery;
            var form = layui.form;
            var flow = layui.flow;
            var laydate = layui.laydate;
            var table = layui.table;
            laydate.render({
                elem: '#next_follow_time',
                type: 'datetime'
                ,trigger: 'click'
            });
            flow.load({
                elem: '#remark_list_box' //流加载容器
                ,done: function(page, next){ //执行下一页的回调
                    $.post('{{route('api.remarkList')}}',{id:'{{$model->id}}',page:page,type:2},function (res) {
                        var _html = '';
                        res.data.list.forEach(function (item,index) {
                            console.log(item)
                            _html += '<li class="layui-timeline-item">';
                            _html += '  <i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                            _html += '  <div class="layui-timeline-content layui-text">';
                            _html += '      <h3 class="layui-timeline-title">'+item.created_at+'</h3>';
                            _html += '      <p><b>节点进度：</b>' + item.old_node_name + ' -> '+item.new_node_name+'</p>';
                            _html += '      <p><b>跟进人：</b>' + item.user_nickname + '</p>';
                            _html += '      <p><b>跟进内容：</b>' + item.content + '</p>';
                            _html += '  </div>';
                            _html += '</li>';
                        })
                        next(_html, page < res.data.lastPage); //假设总页数为 10
                    });

                }
            });

            //报价
            var dataTable = table.render({
                elem: '#dataTable'
                ,height: 'full-20'
                ,url: "{{ route('api.getPriceByCustomerId',['customer_id'=>$model->id]) }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true}
                    ,{field: 'nickname', title: '报价人'}
                    ,{field: 'price', title: '报价价格'}
                    ,{field: 'time', title: '报价时间',width:160}
                    ,{field: 'remark', title: '备注',width:180}
                    ,{field: 'multiple_file', title: '附件',width:180,templet:function (d) {
                            if (d.multiple_file !== null){
                                _str = ''
                                d.multiple_file.split(',').forEach(function (value,index) {
                                    _str += '<a target="_blank" href="'+value+'">附件'+parseInt(index+1)+'</a>， '
                                })
                                return _str;
                            }else {
                                return ''
                            }
                        }}
                    ,{field: 'created_at', title: '创建时间',width:160}
                ]]
            });

            //合同
            table.render({
                elem: '#dataTableContract'
                ,height: 'full-20'
                ,url: "{{ route('caiwu.contract',['customer_id'=>$model->id]) }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true}
                    ,{field: 'num', title: '合同编号',width: 160}
                    ,{field: 'total_money', title: '总金额',width: 100}
                    ,{field: 'owner_user_nickname', title: '业务员',width: 100}
                    ,{field: 'created_at', title: '创建时间',width: 160}
                    ,{field: 'check_status', title: '审核状态',templet:function (d) {
                            if (d.check_status===1){
                                return '<span class="layui-badge">待审核</span>'
                            }else if (d.check_status===2){
                                return '<span class="layui-badge layui-bg-black">未通过</span>'
                            }else if (d.check_status===3){
                                return '<span class="layui-badge layui-bg-green">通过</span>'
                            }
                        },width: 100}
                    ,{field: 'check_result', title: '审核结果'}
                    ,{field: 'remark', title: '备注'}
                ]]
            });

            //订单
            table.render({
                elem: '#dataTableOrder'
                ,height: 'full-20'
                ,url: "{{ route('caiwu.order',['customer_id'=>$model->id]) }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true}
                    ,{field: 'num', title: '订单编号',width: 160}
                    ,{field: 'total_money', title: '总金额',width: 100}
                    ,{field: 'payed_money', title: '已付金额',width: 100}
                    ,{field: 'owner_user_nickname', title: '业务员',width: 100}
                    ,{field: 'created_at', title: '创建时间',width: 160}
                    ,{field: 'check_status', title: '审核状态',templet:function (d) {
                            if (d.check_status===1){
                                return '<span class="layui-badge">待审核</span>'
                            }else if (d.check_status===2){
                                return '<span class="layui-badge layui-bg-black">未通过</span>'
                            }else if (d.check_status===3){
                                return '<span class="layui-badge layui-bg-green">通过</span>'
                            }
                        },width: 100}
                    ,{field: 'check_result', title: '审核结果'}
                    ,{field: 'remark', title: '备注'}
                ]]
            });

            //款项
            table.render({
                elem: '#dataTableFinance'
                ,height: 'full-20'
                ,url: "{{ route('caiwu.finance',['customer_id'=>$model->id]) }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true}
                    ,{field: 'type', title: '关联项目',templet:function (d) {
                            if (d.type===2){
                                return '合同';
                            } else if(d.type===3){
                                return '订单'
                            } else {
                                return ''
                            }
                        }}
                    ,{field: 'num', title: '项目编号'}
                    ,{field: 'outin', title: '收入/支出',templet:function (d) {
                            return d.outin===1?'<span style="color: green">收入</span>':'<span style="color: red">支出</span>'
                        }}
                    ,{field: 'pay_type_name', title: '收支方式'}
                    ,{field: 'remark', title: '备注'}
                    ,{field: 'check_status', title: '审核状态',templet:function (d) {
                            if (d.check_status===1){
                                return '<span class="layui-badge" lay-event="check">待审核</span>'
                            }else if (d.check_status===2){
                                return '<span class="layui-badge layui-bg-black" lay-event="check">未通过</span>'
                            }else if (d.check_status===3){
                                return '<span class="layui-badge layui-bg-green" lay-event="check">通过</span>'
                            }
                        },width: 100}
                    ,{field: 'check_result', title: '审核备注'}
                    ,{field: 'created_at', title: '录入时间'}
                ]]
            });

            //通话
            var dataTableCdr = table.render({
                elem: '#dataTableCdr'
                ,height: 'full-20'
                ,url: "{{ route('api.getCdrByCallee',['callee'=>$model->contract_phone]) }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {checkbox: true}
                    ,{field: 'uuid', title: '记录编号'}
                    ,{field: 'user_nickname', title: '用户'}
                    ,{field: 'caller', title: '主叫号码',style:'color:green'}
                    ,{field: 'callee', title: '被叫号码',style:'color:#2F4056'}
                    ,{field: 'start_time', title: '呼叫时间', sort: true}
                    , {field: 'billsec', title: '通话时长(秒)',width: 100,templet:function (d) {
                            if (d.billsec>0 && d.record_file){
                                return '<i class="layui-icon layui-icon-play" lay-event="play" title="点击播放录音" style="font-size: 12px"> ' + d.billsec +'</i>'
                            }else {
                                return 0
                            }
                        }}
                ]]
            });

            //监听工具条
            table.on('tool(dataTableCdr)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'play'){
                    if (data.billsec>0 && data.record_file){
                        var _html = '<div style="padding:20px;">';
                        _html += '<audio controls="controls" autoplay src="'+data.record_file+'"></audio>';
                        _html += '</div>';
                        layer.open({
                            title : '播放录音',
                            type : 1,
                            area : ['360px','auto'],
                            content : _html
                        })
                    }
                }
            });
        });
    </script>
@endsection

